<h2>List</h2>
<div class="ui form">
    <div class="field">
        <label>Group</label>
        <select name="group" class="ui search dropdown">
        </select>
    </div>

    <div class="field">
        <label>Tests</label>
        <table name="tests" class="ui celled table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Method</th>
                    <th>Params</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr name="none">
                    <td colspan="5" style="text-align: center; font-style: italic;">none</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    (function() {
        var tests = getTests();
        var el = $('select[name="group"]');
        for (var group in tests) {
            var option = $('<option/>').val(group).text(group);
            if (global('list_group') == group) {
                option.attr('selected', true);
            }
            el.append(option);
        }
        global('list_group', undefined);

        el.change(function() {
            var group = el.val();
            var none = $('tr[name="none"]');
            $('tr[name!="none"]', none.parent()).remove();

            if (isArray(tests[group])) {
                for (var i = 0; i < tests[group].length; i++) {
                    var test = tests[group][i];
                    var params = '';
                    for (var k in test.params) {
                        params += '<i>'+k+'</i><br/>';
                    }

                    var tr = $('<tr/>')
                    .append($('<td/>').html('<i>'+test.name+'</i>'))
                    .append($('<td/>').html(test.desc))
                    .append($('<td/>').html('<i>'+test.method+'</i>'))
                    .append($('<td/>').html(params))
                    .append($('<td/>').html(
                        '<div class="ui icon buttons">'+
                        '<button data-action="edit" class="ui button">'+
                        '<i class="icon edit"></i>'+
                        '</button>'+

                        '<button data-action="delete" class="ui button">'+
                        '<i class="icon trash"></i>'+
                        '</button>'+
                        '</div>'
                    ))
                    .insertBefore(none);

                    $('[data-action="edit"]', tr).data('test', test).click(function() {
                        var test = $(this).data('test');

                        global('list_group', test.group);
                        global('list_edit_test', test);
                        loadTemplate('edit');
                    });

                    $('[data-action="delete"]', tr).data('test', test).click(function() {
                        if ($(this).data('lock')) {
                            return;
                        }

                        if (!confirm('Are you sure you want to delete the test?')) {
                            return;
                        }

                        $(this).data('lock', true);

                        var test = $(this).data('test');
                        var res = deleteTest(test.group, test.name);

                        alert(res[1]);
                        if (res[0]) {
                            global('list_group', test.group);
                            switchTab('list');
                        }

                        $(this).data('lock', false);
                    });
                }
            }

            if ($('tr[name!="none"]').size() > 0) {
                none.hide();
            } else {
                none.show();
            }
        });
    })();

    $('.ui.dropdown').dropdown();
</script>
